<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="900px"
    :before-close="closeForm"
    :modal-append-to-body="false"
    :append-to-body="true"
    :close-on-click-modal="false"
  >
    <el-form ref="nodeMsg" :model="nodeMsg" label-width="200px" :rules="rules">
      <el-form-item label="消息类型" prop="MsgType">
        <enumItem
          v-model="nodeMsg.MsgType"
          :dic-key="EnumDic.FlowMsgType"
          placeholder="消息类型"
          sys-head="flow"
        />
      </el-form-item>
      <el-form-item label="发送范围" prop="ReceiveRange">
        <el-radio-group v-model="nodeMsg.ReceiveRange" class="specifyMode" @change="modeChange">
          <el-radio v-for="item in FlowMsgReceiveRange" :key="item.value" :label="item.value">{{ item.text }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="nodeMsg.ReceiveRange == 7" label="指定节点" prop="ToNodeId">
        <el-select
          v-model="nodeMsg.ToNodeId"
          placeholder="指定的节点"
          :clearable="true"
        >
          <el-option v-for="t in nodes" :key="t.Id" :label="t.NodeName" :value="t.Id" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="nodeMsg.ReceiveRange == 2 || nodeMsg.ReceiveRange == 4 || nodeMsg.ReceiveRange == 8" label="限定公司" prop="CompanyId">
        <companySelect
          v-model="nodeMsg.CompanyId"
          :label.sync="nodeMsg.ComName"
        />
      </el-form-item>
      <el-form-item v-if="nodeMsg.ReceiveRange == 4" label="限定单位" prop="UnitId">
        <deptSelect
          v-model="nodeMsg.UnitId"
          :company-id="nodeMsg.CompanyId"
          :label.sync="nodeMsg.UnitName"
          :is-unit="true"
          placeholder="限定单位"
        />
      </el-form-item>
      <el-form-item v-else-if="nodeMsg.ReceiveRange == 8" label="限定部门" prop="DeptId">
        <deptSelect
          v-model="nodeMsg.DeptId"
          :label.sync="nodeMsg.DeptName"
          :company-id="nodeMsg.CompanyId"
          :is-chiose-unit="false"
          placeholder="限定部门"
        />
      </el-form-item>
      <template v-else-if="nodeMsg.ReceiveRange == 5">
        <el-form-item label="选择表单字段" prop="ColId">
          <formColChiose v-model="nodeMsg.ColId" :label.sync="nodeMsg.ColName" :form-id="[formId]" :table-id.sync="nodeMsg.TableId" :func-type="[1]" />
        </el-form-item>
        <el-form-item label="筛选方案名" prop="Keywords">
          <el-input v-model="nodeMsg.Keywords" placeholder="配合字段使用的筛选方案" :clearable="true" />
        </el-form-item>
      </template>
      <el-form-item v-if="nodeMsg.ReceiveRange == 1" label="接收人" prop="ToEmpId">
        <empInput
          v-model="nodeMsg.ToEmpId"
          :is-multiple="true"
          :label.sync="nodeMsg.EmpName"
          placeholder="接收人"
        />
      </el-form-item>
      <template v-if="nodeMsg.ReceiveRange ==2 || nodeMsg.ReceiveRange == 4 || nodeMsg.ReceiveRange == 8">
        <el-form-item label="人员范围">
          <el-radio-group v-model="nodeMsg.EmpRange">
            <el-radio :label="0">全部</el-radio>
            <el-radio :label="1">职务</el-radio>
            <el-radio :label="2">岗位</el-radio>
            <el-radio :label="3">负责人</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="nodeMsg.EmpRange == 1" label="限定职务" prop="TitleCode">
          <dictItem
            v-model="nodeMsg.TitleCode"
            :dic-id="HrItemDic.title"
            :multiple="true"
            :label.sync="nodeMsg.TitleName"
            placeholder="职务"
          />
        </el-form-item>
        <el-form-item v-else-if="nodeMsg.EmpRange == 2" label="限定岗位" prop="PostCode">
          <treeDicItem
            v-model="nodeMsg.PostCode"
            :is-multiple="true"
            :dic-id="HrItemDic.post"
            :label.sync="nodeMsg.PostName"
            placeholder="岗位"
          />
        </el-form-item>
      </template>
      <el-form-item v-else-if="nodeMsg.ReceiveRange == 16" label="限定职务" prop="TitleCode">
        <dictItem
          v-model="nodeMsg.TitleCode"
          :dic-id="HrItemDic.title"
          :multiple="true"
          :label.sync="nodeMsg.TitleName"
          placeholder="职务"
        />
      </el-form-item>
      <el-form-item v-else-if="nodeMsg.ReceiveRange == 32" label="限定岗位" prop="PostCode">
        <treeDicItem
          v-model="nodeMsg.PostCode"
          :is-multiple="true"
          :dic-id="HrItemDic.post"
          :label.sync="nodeMsg.PostName"
          placeholder="岗位"
        />
      </el-form-item>
    </el-form>
    <div style="text-align: center">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="resetForm">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { EnumDic, FlowMsgType, FlowMsgReceiveRange } from '@/flow/config/flowConfig'
import { HrItemDic } from '@/config/publicDic'
import companySelect from '@/components/company/companySelect.vue'
import * as nodeMsgApi from '@/flow/api/flowNodeMsg'
import empInput from '@/components/emp/empInput.vue'
import formColChiose from '@/customForm/components/form/formColChiose.vue'
import deptSelect from '@/components/unit/deptSelect.vue'
export default {
  components: {
    empInput,
    companySelect,
    formColChiose,
    deptSelect
  },
  props: {
    nodeId: {
      type: String,
      default: null
    },
    flowId: {
      type: String,
      default: null
    },
    formId: {
      type: String,
      default: null
    },
    id: {
      type: String,
      default: null
    },
    nodes: {
      type: Array,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      EnumDic,
      HrItemDic,
      FlowMsgType,
      FlowMsgReceiveRange,
      source: null,
      nodeMsg: {
        MsgType: null,
        ReceiveRange: null,
        EmpRange: 0,
        CompanyId: null,
        ComName: null,
        UnitId: null,
        UnitName: null,
        DeptId: null,
        DeptName: null,
        TitleCode: null,
        TitleName: null,
        PostCode: null,
        PostName: null,
        TableId: null,
        ColId: null,
        Keywords: null,
        ToNodeId: null,
        ToEmpId: null
      },
      title: null,
      rules: {
        MsgType: [
          {
            required: true,
            message: '消息类型不能为空！',
            trigger: 'blur'
          }
        ],
        ReceiveRange: [
          {
            required: true,
            message: '发送范围不能为空！',
            trigger: 'blur'
          }
        ],
        ToNodeId: [
          {
            required: true,
            message: '节点不能为空！',
            trigger: 'blur'
          }
        ],
        ToEmpId: [
          {
            required: true,
            message: '接收人不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    comId() {
      return this.$store.getters.curComId
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    modeChange() {
      this.nodeMsg.EmpRange = 0
      this.nodeMsg.CompanyId = this.comId
      this.nodeMsg.UnitId = null
      this.nodeMsg.DeptId = null
      this.nodeMsg.TitleCode = null
      this.nodeMsg.PostCode = null
      this.nodeMsg.TableId = null
      this.nodeMsg.ColId = null
      this.nodeMsg.Keywords = null
      this.nodeMsg.ToNodeId = null
      this.nodeMsg.ToEmpId = null
    },
    resetForm() {
      if (this.source == null) {
        this.nodeMsg = {
          MsgType: null,
          ReceiveRange: null,
          CompanyId: this.comId,
          ComName: null,
          UnitId: null,
          UnitName: null,
          DeptId: null,
          EmpRange: 0,
          DeptName: null,
          TitleCode: null,
          TitleName: null,
          PostCode: null,
          PostName: null,
          TableId: null,
          ColId: null,
          Keywords: null,
          ToNodeId: null,
          ToEmpId: null,
          EmpName: null
        }
      } else {
        this.nodeMsg.MsgType = this.source.MsgType
        if (this.source.ReceiveRange % 2 === 1) {
          this.nodeMsg.ReceiveRange = this.source.ReceiveRange
          this.nodeMsg.EmpRange = 0
        } else if (this.source.ReceiveRange === 16 || this.source.ReceiveRange === 32) {
          this.nodeMsg.ReceiveRange = this.source.ReceiveRange
          this.nodeMsg.EmpRange = 0
        } else if ((64 & this.source.ReceiveRange) === 64) {
          this.nodeMsg.ReceiveRange = this.source.ReceiveRange - 64
          this.nodeMsg.EmpRange = 3
        } else if ((32 & this.source.ReceiveRange) === 32) {
          this.nodeMsg.ReceiveRange = this.source.ReceiveRange - 32
          this.nodeMsg.EmpRange = 2
        } else if ((16 & this.source.ReceiveRange) === 16) {
          this.nodeMsg.ReceiveRange = this.source.ReceiveRange - 16
          this.nodeMsg.EmpRange = 1
        } else {
          this.nodeMsg.ReceiveRange = this.source.ReceiveRange
          this.nodeMsg.EmpRange = 0
        }
        this.nodeMsg.CompanyId = this.source.CompanyId
        this.nodeMsg.UnitId = this.source.UnitId
        this.nodeMsg.DeptId = this.source.DeptId
        this.nodeMsg.TitleCode = this.source.TitleCode
        this.nodeMsg.PostCode = this.source.PostCode
        this.nodeMsg.TableId = this.source.TableId
        this.nodeMsg.ColId = this.source.ColId
        this.nodeMsg.Keywords = this.source.Keywords
        this.nodeMsg.ToNodeId = this.source.ToNodeId
        this.nodeMsg.ToEmpId = this.source.ToEmpId
      }
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    async reset() {
      if (this.id != null) {
        const res = await nodeMsgApi.Get(this.id)
        this.source = res
        this.title = '新增节点消息'
      } else {
        this.source = null
        this.title = '编辑节点消息'
      }
      this.resetForm()
    },
    async set() {
      const data = this.format()
      const res = await nodeMsgApi.Set(this.id, data)
      this.$emit('update:visible', false)
      this.$emit('close', res)
    },
    async add() {
      const data = this.format()
      const res = await nodeMsgApi.Add(data)
      this.$emit('update:visible', false)
      this.$emit('close', res)
    },
    format() {
      const data = Object.assign({}, this.nodeMsg)
      delete data.UnitName
      delete data.DeptName
      delete data.EmpRange
      delete data.ComName
      delete data.EmpName
      delete data.PostName
      delete data.TitleName
      delete data.ColName
      data.FlowId = this.flowId
      data.NodeId = this.nodeId
      if (this.nodeMsg.ReceiveRange === 2 || this.nodeMsg.ReceiveRange === 4 || this.nodeMsg.ReceiveRange === 8) {
        data.ReceiveRange = this.nodeMsg.ReceiveRange + (this.nodeMsg.EmpRange * 16)
      }
      data.Show = this.formatShow()
      return data
    },
    formatShow() {
      if (this.nodeMsg.ReceiveRange === 1) {
        return '指定成员:' + this.nodeMsg.EmpName
      } else if (this.nodeMsg.ReceiveRange === 3) {
        return '流程发起人'
      } else if (this.nodeMsg.ReceiveRange === 7) {
        const nodes = this.nodes.filter(c => this.nodeMsg.ToNodeId.includes(c.Id))
        return '节点人员：' + this.joinStr(nodes, 'NodeName')
      } else if (this.nodeMsg.ReceiveRange === 5) {
        return '读取表单字段:' + this.nodeMsg.ColName
      } else if (this.nodeMsg.ReceiveRange === 16) {
        return '限定职务:' + this.nodeMsg.TitleName
      } else if (this.nodeMsg.ReceiveRange === 32) {
        return '限定岗位:' + this.nodeMsg.PostName
      } else {
        let show = ''
        if ((2 & this.nodeMsg.ReceiveRange) === 2) {
          show = '公司' + this.nodeMsg.ComName
        } else if ((4 & this.nodeMsg.ReceiveRange) === 4) {
          show = '单位' + this.nodeMsg.UnitName
        } else if ((8 & this.nodeMsg.ReceiveRange) === 8) {
          show = '限定部门' + this.nodeMsg.DeptName
        }
        if ((16 & this.nodeMsg.ReceiveRange) === 16) {
          show = show + '和职务'
        } else if ((32 & this.nodeMsg.ReceiveRange) === 32) {
          show = show + '和岗位'
        } else if ((64 & this.nodeMsg.ReceiveRange) === 64) {
          show = show + '管理员'
        } else {
          show = show + '所有人'
        }
        return show
      }
    },
    joinStr(list, key) {
      let str = ''
      list.forEach(c => {
        str += ',' + c[key]
      })
      return str.substring(1)
    },
    save() {
      const that = this
      this.$refs['nodeMsg'].validate((valid) => {
        if (valid) {
          if (this.id != null) {
            that.set()
          } else {
            that.add()
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.el-checkbox-group {
    line-height: 40px
}
.specifyMode .el-radio {
  line-height: 20px;
  width: 25%;
}
</style>
